<template>
  <div>
  <vab-query-form>
    <vab-query-form-left-panel>
      <el-button icon="el-icon-plus" type="primary" @click="handleAdd(0,'')">
        添加志愿者
      </el-button>
      <el-button icon="el-icon-plus" type="primary" @click="handleoldadd(0,'')">
        添加老人志愿者
      </el-button>

    </vab-query-form-left-panel>
    <vab-query-form-right-panel>

      <el-form

        size="mini"
        :inline="true"
        v-model="organ"
        @submit.native.prevent
      >
        <el-form-item>
          <el-form-item  prop="institutionName">
            <el-input v-model="organ.name" placeholder="志愿者姓名"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <el-button
            style="margin-top: 5px"
            icon="el-icon-search"
            type="primary"
            native-type="button"
            @click="searchname"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </vab-query-form-right-panel>
  </vab-query-form>
    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :data="list"



    >

      <el-table-column show-overflow-tooltip label="机构名称" width="200"  prop="institutionName">

      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="志愿者类型"
        prop="typeName"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="老人编号"
        prop="elderlyCode"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="志愿者编号"
        prop="number"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="姓名"
        prop="name"
      ></el-table-column>

      <el-table-column label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.gender=='0'">男</span>
          <span v-if="scope.row.gender=='1'">女</span>
        </template>
      </el-table-column>
      <el-table-column  label="出生日期"  width="150">
        <template slot-scope="scope">
          {{scope.row.birth | parseTime('{y}-{m}-{d}')}}
        </template>
      </el-table-column>
      <el-table-column  label="退出时间"  width="150">
        <template slot-scope="scope" v-if="scope.row.quitTime">
          {{scope.row.quitTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
        </template>
      </el-table-column>
      <el-table-column

        label="操作"
        width="480px"
        fixed="right"
      >
        <template slot-scope="scope" >

          <el-button type="text"  @click="quit(scope.row.id, scope.row)">结束志愿者活动 <i class="el-icon-circle-close"></i></el-button>
          <el-button type="text"  @click="handleAddservice(scope.row.id, scope.row)" v-if="!scope.row.quitTime">添加服务记录 <i class="el-icon-edit-outline"></i></el-button>
          <el-button type="text"  @click="handleserviceinfo(scope.row.id, scope.row)">服务记录详情 <i class="el-icon-tickets"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :background="background"
      :total="total"
      :current-page.sync="queryForm.currPageNo"
      :page-size="queryForm.limit"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
     <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    destroy-on-close
  >
    <el-form ref="form"  :rules="rules"  :model="form"  label-width="120px" v-if="isshow">
    <el-form-item label="姓名"  prop="name" >
      <el-input v-model="form.name"   ></el-input>

    </el-form-item>

      <el-form-item label="出生日期"  prop="birth" >
        <el-date-picker
          v-model="form.birth"
          style="width: 100%"
          format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期">
        </el-date-picker>

      </el-form-item>
      <el-form-item label="性别" required >
        <el-radio v-model="form.gender" label="1">男</el-radio>
        <el-radio v-model="form.gender" label="0">女</el-radio>

      </el-form-item>

    </el-form>
    <el-form ref="from"  :model="from"  label-width="120px" v-if="!isshow">
    <el-form-item label="老人姓名/编号/证件号"  required label-width="180px" >
      <el-select
        v-model="value"
        filterable
        remote
        reserve-keyword
        placeholder="老人姓名/编号/证件号"
        :remote-method="remoteMethod"
        :loading="loading">
        <el-option
          v-for="item in options"
          :key="item.elderlyCode"
          :label="item.elderlyName"
          :value="item.elderlyCode">
        </el-option>
      </el-select>

    </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary"  @click="Saveadd('form')">确 定</el-button>
    </div>
  </el-dialog>
    <el-dialog
      title="服务记录"
      :visible.sync="dialogFormVisibles"
      :width="width"
      destroy-on-close
    >
      <el-form   ref="service" :rules="rule" :model="service"  label-width="120px" v-if="isservie" >
        <el-form-item label-width="120px" label="开始服务时间：" prop="serviceTime" >
          <el-date-picker
            v-model="service.serviceTime"
            type="datetime"
            placeholder="选择服务时间"
            style="width: 100%"

            :picker-options="pickerOptions0">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="服务时长(小时)"  prop="serviceHours" >
          <el-input type="number" v-model="service.serviceHours"   min=0></el-input>

        </el-form-item>

        <el-form-item label="服务说明"   prop="serviceDesc">
          <el-input type="textarea" v-model="service.serviceDesc"   ></el-input>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="close">取 消</el-button>
        <el-button type="primary"  @click="save('service')" v-if="isservie">确 定</el-button>
      </div>
      <div   v-if="!isservie">
        <vab-query-form>
          <vab-query-form-left-panel>
            <div class="time-select-input">
              <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="startTime" :picker-options="pickerBeginDateBefore" placeholder="开始时间"></el-date-picker>

              <el-date-picker type="date"  v-model="endTime" value-format="yyyy-MM-dd" :picker-options="pickerBeginDateAfter" placeholder="结束时间" style="margin-left: 20px "></el-date-picker>
              <el-button type="primary" style="margin-left: 20px " @click="searchservicetime">查询</el-button>
            </div>


          </vab-query-form-left-panel>

        </vab-query-form>
      <el-table
        ref="tableSort"
        v-loading="listLoading"
        :data="table"



      >
      <el-table-column
        show-overflow-tooltip
        label="志愿者编号"
        prop="volunteerNumber"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="姓名"
        prop="volunteerName"
      ></el-table-column>
        <el-table-column  label="服务开始时间"  width="150">
          <template slot-scope="scope" v-if="scope.row.serviceTime">
            {{scope.row.serviceTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="服务时长"
          prop="serviceHours"
        ></el-table-column>
        <el-table-column
          label="服务内容"
          prop="serviceDesc"
        ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="操作"

      >
        <template slot-scope="scope" >
                    <el-button type="text"  @click="haldeDel(scope.row.id, scope.row)">删除 <i class="el-icon-edit"></i></el-button>

        </template>
      </el-table-column>

      </el-table>
        <el-pagination
          :background="background"
          :total="totals"
          :current-page.sync="searchserinfo.currPageNo"
          :page-size="searchserinfo.limit"
          @current-change="handleCurrentChanges"
          @size-change="handleSizeChanges"
        ></el-pagination>
      </div>
    </el-dialog>

  </div>
</template>

<script>
del
    import { parseTime} from "@/utils/index";
    import { add } from "@/api/volunteer";
    import { searchelder } from "@/api/volunteer";
    import { addelder } from "@/api/volunteer";
    import { searchvolunteer } from "@/api/volunteer";
    import { quitvoluteer } from "@/api/volunteer";
    import { addservice } from "@/api/volunteer";
    import { searchserviceinfo } from "@/api/volunteer";
    import { del } from "@/api/volunteer";
    export default {
        name: "Volunteer",
        filters:{
            parseTime:parseTime
        },

       data(){

           return{

               pickerOptions0: {
                   disabledDate(time) {
                       return time.getTime() > Date.now();
                   }
               },

               pickerBeginDateBefore:{
                   disabledDate: (time) => {
                       if(this.endTime){
                           return time.getTime() >new Date(this.endTime).getTime() || time.getTime() > Date.now();
                       }else{
                           return time.getTime() >Date.now();
                       }
                   }
               },
               pickerBeginDateAfter:{
                   disabledDate: (time) => {
                       if(this.startTime){

                           return time.getTime() <new Date(this.startTime).getTime() || time.getTime() > Date.now();
                       }else{
                           return time.getTime() >Date.now();
                       }
                   }

               },
               list:[],
               table:[],
               startTime:"",
               endTime:"",
               searchserinfo:{
                    currPageNo:1,
                    limit:4,
                    number:"",

               },
               title:"添加自愿者",
               background:true,
               total:0,
               totals:0,
               listLoading:false,
               dialogFormVisible:false,
               dialogFormVisibles:false,
               options: [],
               isshow:false,
               width:'500px',
               isservie:true,
               loading:false,
               value: "",
               from:{
                   elderlyCondition:"",
               },
               service:{
                   number:"",
                   serviceDesc:"",//服务说明
                   serviceHours:"",//服务时间(小时)
                   serviceTime:""//开始服务时间
               },
               organ:{

                   name:"",

               },

               form:{
                   name:"",
                   birth:"",
                   gender:"1",
                   elderlyCode:"",
               },
              queryForm:{
                  currPageNo:1,
                  limit:8,
                  name:"",
                  organNumber:"",
              },
               rules: {
                   name: [
                       {required: true, message: '请输入姓名', trigger: 'blur'},
                   ],
                   birth: [
                       {required: true, message: '出生日期', trigger: 'blur',type: 'date'},
                   ],

               },
               rule: {
                   serviceDesc: [
                       {required: true, message: '请输入服务说明', trigger: 'blur'},
                   ],
                   serviceHours: [
                       {required: true, message: '服务时长', trigger: 'blur',},
                   ],
                   serviceTime: [
                       {required: true, message: '开始服务时间', trigger: 'change',},
                   ],

               }
           }
       },
        created(){
            this.queryForm.organNumber=localStorage.getItem("institutionNumber")
            this.searchvolunteer()
        },
      methods:{


          handleoldadd(){
              this.title="添加老人自愿者"
              this.value=""
              this.isshow=false
              this.dialogFormVisible=true
          },
          remoteMethod(query) {
              if (query !== '') {
                  this.loading = true;
                  console.log(query)
                 let elderlyCondition=query
                  searchelder({elderlyCondition}).then(res =>{
                      console.log(res)
                      this.options=res.data


                      setTimeout(() => {
                          this.loading = false;
                      }, 500);
                  })

              } else {
                  this.options = [];
              }
          },
          handleAdd(){
                this.title="添加自愿者"
                this.isshow=true
                this.form.name=""
                this.form.birth=""
                this.dialogFormVisible=true
          },
          handleAddservice(id,row){
              this.width="500px"
              this.isservie=true
              this.service.serviceDesc=""
              this.service.serviceHours=""
              this.service.serviceTime=""
              this.service.number=row.number
              this.dialogFormVisibles=true
          },
          handleserviceinfo(id,row){

               this.width="1000px"
              this.startTime=""
              this.endTime=""
              this.searchserinfo.startTime=""
              this.searchserinfo.endTime=""
              this.searchserinfo.number=row.number
              this.isservie=false
              this.dialogFormVisibles=true
              this.searchserinfo.currPageNo=1
              this.searchserviceinfo()

          },

          searchservicetime(){
              this.searchserinfo.currPageNo=1
              this.searchserinfo.startTime=this.startTime
              this.searchserinfo.endTime=this.endTime
               this.searchserviceinfo()
          },
          searchserviceinfo(){
              searchserviceinfo(this.searchserinfo).then(res =>{
                  console.log(res)
                  this.table=res.data.data
                  this.totals=res.data.total


              })
          },
          save(formName){
              if(this.isservie){
                  this.$refs[formName].validate((valid) => {
                      if (valid) {
                          console.log(this.service)
                          addservice(this.service).then(res =>{
                              console.log(res)
                              if(res.code==200){
                                  this.$message({

                                      message: "服务记录已保存",
                                      type: 'success'
                                  })
                                  this.dialogFormVisibles=false
                              }else {
                                  return false
                              }


                          })
                      } else {

                          return false;
                      }
                  });
              }else {

              }

          },
          haldeDel(id,row){
              console.log(row)
              let recordNumber=row.identify

              this.$baseConfirm("你确定要删除此条记录吗？", null,() => {
                  del({recordNumber}).then(res =>{
                      console.log(res)
                     if(res.code==200){
                         this.$message({

                             message: "删除成功",
                             type: 'success'
                         })
                         this.searchserviceinfo()

                     }else {
                         return false
                     }

                  })

              });

          },
          close(){
              this.dialogFormVisible=false
              this.dialogFormVisibles=false
          },
          searchvolunteer(){
              searchvolunteer(this.queryForm).then(res =>{
                  console.log(res)
                  this.list=res.data.data
                  this.total=res.data.total


              })

          },
          Saveadd(formName){
              if(this.isshow){
                  this.$refs[formName].validate((valid) => {
                      if (valid) {

                          add(this.form).then(res =>{
                              console.log(res)
                              if(res.code==200){
                                  this.$message({

                                      message: "自愿者添加成功",
                                      type: 'success'
                                  })
                              }
                              this.queryForm.currPageNo=1
                              this.dialogFormVisible=false
                             this.searchvolunteer()


                          })
                      } else {

                          return false;
                      }
                  });
              }else {
                   console.log(this.value)
                  let  elderlyCode=this.value
                  addelder({elderlyCode}).then(res =>{
                      console.log(res)
                      if(res.code==200){
                          this.$message({

                              message: "老人自愿者添加成功",
                              type: 'success'
                          })
                          this.dialogFormVisible=false
                          this.queryForm.currPageNo=1
                          this.searchvolunteer()
                      }



                  })


              }

          },
          searchname(){
              this.queryForm.name=  this.organ.name
              this.queryForm.currPageNo=1
              this.searchvolunteer()
          },
          handleSizeChange(val) {
              this.queryForm.limit = val;
              this.searchvolunteer();

          },
          handleCurrentChange(val) {
              this.queryForm.currPageNo = val;
              console.log(val)
              this.searchvolunteer();
          },
          handleSizeChanges(val) {
              this.searchserinfo.limit = val;
               this.searchserviceinfo()

          },
          handleCurrentChanges(val) {
              this.searchserinfo.currPageNo = val;
              this.searchserviceinfo()
          },
          quit(id,row){
              let number=row.number
              this.$baseConfirm("你确定要结束自愿者活动吗？", null,() => {
                  quitvoluteer({number}).then(res =>{
                      console.log(res)

                      if(res.code==200){
                          this.$message({
                              message: "已成功结束自愿者活动",
                              type: 'success'
                          })
                          this.searchvolunteer()
                      }else {
                          return false
                      }


                  })

              });

          }
      },

    }
</script>

<style scoped>

</style>
